<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>国际机票</title>
    <meta name="description" id="DESC" content="">
    <meta name="keywords" id="KEYWORDS" content="">
    <link rel="stylesheet"
          href="http://pic.lvmama.com/min/index.php?f=/styles/v6/header_new.css,/styles/lv/calendar.css,/styles/lv/buttons.css,/styles/lv/icons.css,/styles/lv/tips.css,/styles/lv/ui.css,/styles/v5/modules/tip.css">
    <link rel="stylesheet" href="css/search.css">
    <link rel="stylesheet" href="css/select.css">

</head>
<body class="international-flight-select">

<div class="everything">

    <div class="crumbs clearfix">
        <p class="crumbs-link">
            <a href="#">首页</a> <em>&gt;</em>
            <a href="#">国际机票</a> <em>&gt;</em>
            <a class="current">上海到香港机票（往返）</a>
        </p>
    </div>

    <div class="ticket-search">
        <div class="if-search ifs-is-multiple">
            <form class="if-search-form clearfix">

                <div class="ifs-submit-box clearfix">
                    <a class="btn btn-pink btn-block ifs-submit">搜索</a>
                </div>

                <dl class="ifs-type clearfix">
                    <dt>航程类型</dt>
                    <dd class="nova-radio-group">
                        <label>
                            <select name="SEARCH_TYPE">
                                <option value="single">单程</option>
                                <option value="return">往返</option>
                                <option value="multiple">多程</option>
                            </select>
                        </label>
                    </dd>
                </dl>

                <!--单程 开始-->
                <div class="ifs-single clearfix">
                    <dl class="ifs-bs-from clearfix">
                        <dt><label for="SEARCH_SINGLE_FORM">出发城市</label></dt>
                        <dd>
                            <input class="ifs-bs-input JS_search_city" id="SEARCH_SINGLE_FORM"
                                   data-flag="JS_search_city_start"
                                   name="SEARCH_SINGLE_FORM"
                                   placeholder="中文/拼音/英文"
                                   type="text">
                            <input class="JS_search_city_id" type="hidden" id="SEARCH_SINGLE_FORM_ID"
                                   name="SEARCH_SINGLE_FORM_ID">
                            <div class="ifs-bs-swap">换</div>
                            <i></i>
                        </dd>
                    </dl>
                    <dl class="ifs-bs-to clearfix">
                        <dt><label for="SEARCH_SINGLE_TO">到达城市</label></dt>
                        <dd>
                            <input class="ifs-bs-input JS_search_city" id="SEARCH_SINGLE_TO"
                                   data-flag="JS_search_city_dest"
                                   name="SEARCH_SINGLE_TO"
                                   placeholder="中文/拼音/英文"
                                   type="text">
                            <input class="JS_search_city_id" type="hidden" id="SEARCH_SINGLE_TO_ID"
                                   name="SEARCH_SINGLE_TO_ID">
                            <i></i>
                        </dd>
                    </dl>
                    <dl class="ifs-bs-from-date clearfix">
                        <dt><label for="SEARCH_SINGLE_FORM_DATE">出发日期</label></dt>
                        <dd>
                            <input class="ifs-bs-input JS_search_single_date"
                                   data-flag="JS_search_single_date_start"
                                   id="SEARCH_SINGLE_FORM_DATE"
                                   value="2017-04-25"
                                   placeholder="请选择"
                                   name="SEARCH_SINGLE_FORM_DATE" type="text" readonly>
                            <em>周二</em>
                            <i></i>
                        </dd>
                    </dl>
                    <dl class="ifs-bs-to-date clearfix">
                        <dt><label for="SEARCH_SINGLE_TO_DATE">返回日期</label></dt>
                        <dd>
                            <input class="ifs-bs-input JS_search_single_date"
                                   data-flag="JS_search_single_date_dest"
                                   id="SEARCH_SINGLE_TO_DATE"
                                   value="2017-04-25"
                                   placeholder=""
                                   name="SEARCH_SINGLE_TO_DATE" type="text" readonly>
                            <span class="ifs-bs-placeholder">请选择</span>
                            <em>周二</em>
                            <i></i>
                        </dd>
                    </dl>
                </div>
                <!--单程 结束-->

                <!--多程 开始-->
                <div class="ifs-multiple">

                    <div class="ifs-bm-items">

                        <div class="ifs-bm-item clearfix">
                            <div class="ifs-bm-index">1</div>

                            <label class="ifs-bm-from">
                                <b>出发城市</b>
                                <input class="ifs-bm-input JS_search_city JS_search_city_start"
                                       data-flag="JS_search_city_start" type="text"
                                       placeholder="中文/拼音/英文">
                                <input class="JS_search_city_id" type="hidden">
                                <i></i>
                            </label>
                            <label class="ifs-bm-to">
                                <b>到达城市</b>
                                <input class="ifs-bm-input JS_search_city JS_search_city_dest"
                                       data-flag="JS_search_city_dest" type="text"
                                       placeholder="中文/拼音/英文">
                                <input class="JS_search_city_id" type="hidden">
                                <i></i>
                            </label>
                            <label class="ifs-bm-from-date">
                                <b>出发日期</b>
                                <input class="ifs-bm-input JS_search_multiple_date"
                                       data-flag="JS_search_multiple_date"
                                       type="text" value="2017-04-25"
                                       placeholder="请选择"
                                       readonly>
                                <em>周二</em>
                                <i></i>
                            </label>
                        </div>
                        <div class="ifs-bm-item clearfix">
                            <div class="ifs-bm-index">2</div>

                            <label class="ifs-bm-from">
                                <b>出发城市</b>
                                <input class="ifs-bm-input JS_search_city JS_search_city_start"
                                       data-flag="JS_search_city_start" type="text"
                                       placeholder="中文/拼音/英文">
                                <input class="JS_search_city_id" type="hidden">
                                <i></i>
                            </label>
                            <label class="ifs-bm-to">
                                <b>到达城市</b>
                                <input class="ifs-bm-input JS_search_city JS_search_city_dest"
                                       data-flag="JS_search_city_dest" type="text"
                                       placeholder="中文/拼音/英文">
                                <input class="JS_search_city_id" type="hidden">
                                <i></i>
                            </label>
                            <label class="ifs-bm-from-date">
                                <b>出发日期</b>
                                <input class="ifs-bm-input JS_search_multiple_date"
                                       data-flag="JS_search_multiple_date"
                                       placeholder="请选择"
                                       type="text" value="" readonly>
                                <em></em>
                                <i></i>
                            </label>
                        </div>
                    </div>

                    <div class="ifs-bm-add-btn">
                        <i></i>
                        添加航程
                    </div>

                </div>
                <!--多程 结束-->

                <div class="ifs-others clearfix">
                    <dl class="ifs-passenger-type clearfix">
                        <dd>
                            <div class="nova-select-label ifs-o-select-small">
                                <label>

                                    <select class="search-others-adult">
                                        <option value="1">1成人</option>
                                        <option value="2">2成人</option>
                                        <option value="3">3成人</option>
                                        <option value="4">4成人</option>
                                        <option value="5">5成人</option>
                                        <option value="6">6成人</option>
                                        <option value="7">7成人</option>
                                        <option value="8">8成人</option>
                                        <option value="9">9成人</option>
                                    </select>
                                </label>
                            </div>
                            <div class="nova-select-label ifs-o-select-small JS_tip_right" tip-content="儿童：2-12岁">
                                <label>

                                    <select class="search-others-child">
                                        <option value="0">0儿童</option>
                                        <option value="1">1儿童</option>
                                        <option value="2">2儿童</option>
                                        <option value="3">3儿童</option>
                                        <option value="4">4儿童</option>
                                        <option value="5">5儿童</option>
                                        <option value="6">6儿童</option>
                                    </select>
                                </label>
                            </div>
                        </dd>
                    </dl>
                    <dl class="ifs-berths-level clearfix">
                        <dt>舱位等级</dt>
                        <dd>
                            <div class="nova-select-label ifs-o-select">
                                <label>

                                    <select class="search-others-cabin">
                                        <option value="0">经济舱/超级经济舱</option>
                                        <option value="1">商务舱/头等舱</option>
                                    </select>
                                </label>
                            </div>
                        </dd>
                    </dl>
                    <div class="ifs-bo-error">
                        <div class="nova-tip nova-tip-warning">
                            <span class="nova-icon-xs nova-icon-warning"></span>
                            <span class="ifs-bo-text"></span>
                        </div>
                    </div>
                </div>

                <div class="ifs-pic"></div>

            </form>
        </div>
    </div>

    <!--机票主体-->
    <div class="ticket-main clearfix">
        <div class="ticket-sidebar">
            <div class="ticket-filter">
                <h4 class="tf-header"><a class="clean-filter" href="javascript:;">清楚全部</a>筛选</h4>
                <div class="tf-box">
                    <!--loading-->
                    <div class="tf-loading">加载中...</div>
                </div>
            </div>
            <div class="if-why">
                <h4>为什么选择驴妈妈？</h4>
                <a class="why-box" href="" target="_blank">
                    <p class="clearfix">
                        <i class="why-service"></i>
                        <span><em>放心的价格</em>领先的服务标准&nbsp; 独创的保障体系</span>
                    </p>
                    <p class="clearfix">
                        <i class="why-price"></i>
                        <span><em>放心的价格</em>具竞争力的价格&nbsp; 全球优价智能引擎</span>
                    </p>
                </a>
            </div>
        </div>
    </div>


</div>

<div class="template">

    <div class="ifs-bm-item clearfix">
        <div class="ifs-bm-index">2</div>

        <label class="ifs-bm-from">
            <b>出发城市</b>
            <input class="ifs-bm-input JS_search_city JS_search_city_start"
                   data-flag="JS_search_city_start"
                   type="text" placeholder="中文/拼音/英文">
            <input class="JS_search_city_id" type="hidden">
            <i></i>
        </label>
        <label class="ifs-bm-to">
            <b>到达城市</b>
            <input class="ifs-bm-input JS_search_city JS_search_city_dest"
                   data-flag="JS_search_city_dest"
                   type="text" placeholder="中文/拼音/英文">
            <input class="JS_search_city_id" type="hidden">
            <i></i>
        </label>
        <label class="ifs-bm-from-date">
            <b>出发日期</b>
            <input class="ifs-bm-input JS_search_multiple_date"
                   data-flag="JS_search_multiple_date" type="text" value=""
                   placeholder="请选择"
                   readonly>
            <em></em>
            <i></i>
        </label>
        <div class="ifs-bm-close"><i></i></div>

    </div>

</div>

<div class="ifs-search-city">
    <p class="ifs-sc-title">支持中文/拼音/英文输入</p>

    <div class="ifs-sc-tabs clearfix">
        <div class="ifs-sc-tab active">国内热门<i></i></div>
        <div class="ifs-sc-tab">国际热门<i></i></div>
        <div class="ifs-sc-tab">亚洲<i></i></div>
        <div class="ifs-sc-tab">欧洲<i></i></div>
        <div class="ifs-sc-tab">美洲<i></i></div>
        <div class="ifs-sc-tab">大洋洲<i></i></div>
        <div class="ifs-sc-tab">非洲<i></i></div>
    </div>
    <div class="ifs-sc-panes">
        <div class="ifs-sc-pane active">

            <a data-city-id="1">上海</a>
            <a data-city-id="2">北京</a>
            <a data-city-id="1">成都</a>
            <a data-city-id="1">昆明</a>
            <a data-city-id="1">西安</a>
            <a data-city-id="1">深圳</a>
            <a data-city-id="1">重庆</a>
            <a data-city-id="1">杭州</a>
            <a data-city-id="1">厦门</a>
            <a data-city-id="1">乌鲁木齐</a>
            <a data-city-id="1">广州</a>
            <a data-city-id="1">海口</a>
            <a data-city-id="1">哈尔滨</a>
            <a data-city-id="1">南京</a>
            <a data-city-id="1">武汉</a>
            <a data-city-id="1">长沙</a>
            <a data-city-id="1">青岛</a>
            <a data-city-id="1">郑州</a>
            <a data-city-id="1">三亚</a>
            <a data-city-id="1">福州</a>
            <a data-city-id="1">贵阳</a>
            <a data-city-id="1">天津</a>
            <a data-city-id="1">南宁</a>
            <a data-city-id="1">沈阳</a>
            <a data-city-id="1">太原</a>
            <a data-city-id="1">大连</a>
            <a data-city-id="1">兰州</a>
            <a data-city-id="1">济南</a>
            <a data-city-id="1">长春</a>
            <a data-city-id="1">温州</a>
        </div>
        <div class="ifs-sc-pane">
            <a data-city-id="1">上海</a>
            <a data-city-id="1">北京</a>
            <a data-city-id="1">成都</a>
            <a data-city-id="1">昆明</a>
            <a data-city-id="1">西安</a>
            <a data-city-id="1">深圳</a>
            <a data-city-id="1">重庆</a>
            <a data-city-id="1">杭州</a>
            <a data-city-id="1">厦门</a>
            <a data-city-id="1">乌鲁木齐</a>
            <a data-city-id="1">广州</a>
            <a data-city-id="1">海口</a>
            <a data-city-id="1">哈尔滨</a>
            <a data-city-id="1">南京</a>
            <a data-city-id="1">武汉</a>
            <a data-city-id="1">长沙</a>
            <a data-city-id="1">青岛</a>
            <a data-city-id="1">郑州</a>
            <a data-city-id="1">三亚</a>
            <a data-city-id="1">福州</a>
            <a data-city-id="1">贵阳</a>
            <a data-city-id="1">天津</a>
            <a data-city-id="1">南宁</a>
            <a data-city-id="1">沈阳</a>
            <a data-city-id="1">太原</a>
            <a data-city-id="1">大连</a>
            <a data-city-id="1">兰州</a>
            <a data-city-id="1">济南</a>
            <a data-city-id="1">长春</a>
            <a data-city-id="1">温州</a>
        </div>
        <div class="ifs-sc-pane">
            <a data-city-id="1">上海</a>
        </div>
        <div class="ifs-sc-pane">
            <a data-city-id="1">上海</a>
        </div>
        <div class="ifs-sc-pane">
            <a data-city-id="1">上海</a>
        </div>
        <div class="ifs-sc-pane">
            <a data-city-id="1">上海</a>
        </div>
        <div class="ifs-sc-pane">
            <a data-city-id="1">上海</a>
        </div>
    </div>

    <div class="ifs-sc-close"><i></i></div>
</div>

<div class="ifs-search-auto">
    <div class="item item-city">
        <i></i>
        城市
    </div>
    <div class="item item-plane">
        <i></i>
        机场
    </div>
    <div class="item item-plane">
        <i></i>
        机场
    </div>
</div>

<script src="http://pic.lvmama.com/js/v6/public/footer.js"></script>

<script src="http://pic.lvmama.com/min/index.php?f=/js/new_v/jquery-1.7.2.min.js,/js/v6/header_new.js,/js/lv/calendar.js,/js/v5/modules/pandora-poptip.js,/js/lv/ui.js"></script>
<!--<script src="http://s3.lvjs.com.cn//js/common/losc.js"></script>-->
<!--<script src="http://s3.lvjs.com.cn/js/v5/ibm/eluminate.js"></script>-->
<!--<script src="http://s1.lvjs.com.cn/js/v5/ibm/coremetrics-initalize.js"></script>-->
<script src="js/search.js"></script>
<script src="js/select.js"></script>
<script>

    //TODO
    $(function () {

        var ui = nova.ui();

        // TODO 根据往返id请求对应数据
        setTimeout(function () {
            // 模拟0.5s加载时间，请去掉上面一行代码
            $.ajax({
                url: "./filter-option-template.html",
                data: {},
                dataType: "html",
                success: function (result) {
                    $(".tf-loading").hide();
                    $(".tf-box").append($(result));

                    // 渲染ui组件
                    ui.render();
                }
            });
            // 模拟0.5s加载时间，请去掉下面一行代码
        }, 500);

        //搜索
        $(".ifs-submit").on("click", function () {

            //验证
            var ret = window.searchSingleton.searchSubmitValidate();

            console.log(ret);

            var data = $(".if-search-form").serialize();
            //console.log(data);

        });

    });

</script>
</body>
</html>